<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <h2>成绩表</h2>
        <label>姓名：</label><span>{{name}}</span>
        <label>性别：</label><span>{{sex}}</span>
        <label>年龄：</label><span>{{age}}</span>
        <div class="report">
            <div>学期</div>
            <div>数学</div>
            <div>物理</div>
            <div>化学</div>
            <div>英语</div>
            <div>计算机</div>
            <div>总分</div>
        </div>
        <div class="content" v-for="(grade,index) in grades">
            <div>{{grade.term}}</div>
            <div v-for="score in grade.scores">
                <div>{{score}}</div>
            </div>
            <div>{{total(index)}}</div>
        </div>
    </div>
    <script type="text/javascript">
        var exam = new Vue({
            el:'#example',
            data:{
                name:'张无忌',
                sex:'男',
                age:20,
                grades:[{
                    term:'第一学期',
                    scores:{
                        math:90,
                        physics:85,
                        chemistry:90,
                        english:86,
                        computer:89
                    }
                },{
                    term:'第二学期',
                    scores:{
                        math:90,
                        physics:85,
                        chemistry:90,
                        english:86,
                        computer:89
                    }
                }]
            },
            methods:{
                total:function(index){
                    var total = 0;
                    var obj = this.grades[index].scores;
                    for(var i in obj){
                        total += obj[i];
                    }
                    return total;
                }
            }
        })
    </script>
</body>
</html>